<template>
  <div class="box">
    <div class="container">
      <el-card shadow="hover" style="padding:0 50px;background:rgba(197, 216, 217, 1) ">
        <h1>注册新账号</h1>
        <el-form label-width="90px">
          <el-form-item  label="新账号：">
            <el-input v-model="newUserInfo.username" placeholder="请输入新账号"></el-input>
          </el-form-item>
          <el-form-item  label="密码：">
            <el-input v-model="newUserInfo.password" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码：">
            <el-input v-model="newUserInfo.newPassword"  placeholder="请确认你的密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="昵称：">
            <el-input v-model="newUserInfo.name" type="text" placeholder="请输入你的昵称"></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-select v-model="newUserInfo.sex" placeholder="请选择你的性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期：">
            <el-date-picker
                v-model="newUserInfo.birthday"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择出生日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="年龄：">
            <el-input v-model.number="newUserInfo.age" placeholder="请输入你的年龄"></el-input>
          </el-form-item>
          <el-form-item label="地址：">
            <el-input v-model="newUserInfo.address" placeholder="请输入你的地址"></el-input>
          </el-form-item>
          <el-form-item label="用户类型：">
            <el-select v-model="usertype" placeholder="请选择你注册的用户类型">
              <el-option label="普通用户" value="普通用户"></el-option>
              <el-option label="管理员" value="管理员"></el-option>
            </el-select>
          </el-form-item>
          <el-button @click="Register" type="danger" style="margin-right: 2vw; width: 5vw" >注册</el-button>
          <el-button @click="reback" type="danger" style="width: 5vw">返回</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import Request from "@/Network/axios";
import {Message} from "element-ui";

export default {
  name: "IsRegister",
  data() {
    return {
      newUserInfo: {
        username: '',
        password: '',
        newPassword: '',
        name: '',
        sex: '',
        age: null,
        birthday: '',
        address: '',
        usertype: ''
      },
      usertype: '普通用户',

    }
  },

  watch: {
    'newUserInfo.birthday': {
      deep: true,
      handler(newVal){

        if (this.newUserInfo.birthday === ''){
          return Message({
            type: 'warning',
            message: '请填写出生日期！'
          })
        }

        const data = new Date();
        const nowYear = data.getFullYear()
        const nowMonth = data.getMonth() + 1
        const nowDay = data.getDate()
        const computedAge = nowYear - newVal.split('-')[0]

        if (nowMonth > (newVal.split('-')[1] - 0)){
          return this.newUserInfo.age = computedAge
        }

        if (nowMonth === (newVal.split('-')[1] - 0)){
          if (nowDay >= (newVal.split('-')[2] - 0)){
            return this.newUserInfo.age = computedAge
          }
          if (nowDay < (newVal.split('-')[2] - 0)){
            return computedAge - 1 < 0 ? this.newUserInfo.age = 0 : this.newUserInfo.age = computedAge - 1
          }
        }

        if (nowMonth < (newVal.split('-')[1] - 0)){
          return computedAge - 1 < 0 ? this.newUserInfo.age = 0 : this.newUserInfo.age = computedAge - 1
        }
      }
    }
  },

  methods: {

    // 修改 usertype 的值
    changeUsertype(){
      this.usertype === '普通用户' ? this.newUserInfo.usertype = '0' : this.newUserInfo.usertype = '1'
    },



    // 注册
    Register(){
      this.changeUsertype()

      // 判断两次输入的密码是否一致
      if (this.newUserInfo.password !== this.newUserInfo.newPassword){
        return Message({
          type: "warning",
          message: '密码不一致'
        })
      }


      Request({
        url: '/user/Register',
        method: 'post',
        data: {
          username:this.newUserInfo.username,
          password:this.newUserInfo.password,
          name:this.newUserInfo.name,
          sex:this.newUserInfo.sex,
          age: this.newUserInfo.age,
          birthday:this.newUserInfo.birthday,
          address:this.newUserInfo.address,
          usertype:this.newUserInfo.usertype
        }
      }).then(res => {
        let Type;

        res.data.status >= 400 ? Type = 'warning' : Type = 'success';

        Message({
          type: Type,
          message: res.data.message
        })

        if (res.data.status >= 200 && res.data.status < 300){
          this.$router.replace({
            name: 'isEnter'
          })
        }
      }).catch(err => {
        Message({
          type: 'success',
          message: err
        })
      })
    },

    // 返回登入
    reback(){
      this.$router.replace({
        name: 'IsEnter'
      })
    }
  }
}
</script>

<style scoped>
.box {
  background-image: url("../assets/BGImage.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  height: 937px;
}

.container {
  opacity: 0.8;
  width: 40vw;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: 100px;
}

h1 {
  margin: 3vh 0;
}
</style>